<template>
  <div class="iuapBodyView">
    <div class="IuapSearchView">
      <div class="faanView">
        <!-- <span>查询方案</span> -->
      </div>
      <div class="formView" ref="formView">
        <div
          class="formItemView"
          :style="{ width: `calc(100%/` + itemNumber + `)` }"
          v-for="(item, index) in MytreeDataFn"
          :key="index"
        >
          <div class="itemView">
            <span>{{ item.name }}</span>
            <treeSelectDialog
              size="mini"
              v-if="item.type == 'treeSelect'"
              :value.sync="item.value"
              dataType="text"
              :title="item.name"
              :treeData.sync="item.treeData"
              :disabled="item.disabled"
              :defaultProps="item.defaultProps"
            >
            </treeSelectDialog>
            <IuapTableDialog v-if="item.type == 'tableSelect'" v-model="item.value"></IuapTableDialog>
            <el-input
              size="mini"
              v-if="item.type == 'input'"
              placeholder="请输入内容"
              v-model="item.value"
              :disabled="item.disabled"
              clearable
            >
            </el-input>
            <el-select
              size="mini"
              :disabled="item.disabled"
              :popper-append-to-body="false"
              style="width: 100%; max-width: calc(100% - 110px)"
              v-if="item.type == 'option'"
              v-model="item.value"
              placeholder="请选择"
              clearable
            >
              <el-option v-for="items in item.options" :key="items.value" :label="items.label" :value="items.value">
              </el-option>
            </el-select>
            <el-date-picker
              size="mini"
              :disabled="item.disabled"
              style="width: 100%"
              v-if="item.type == 'date'"
              v-model="item.value"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
            <el-date-picker
              size="mini"
              :disabled="item.disabled"
              style="width: 100%"
              v-if="item.type == 'datetimerange'"
              v-model="item.value"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>
          </div>
        </div>
      </div>
      <div class="searchView">
        <el-button size="mini" type="info" @click="searchFn"><i class="el-icon-search"></i></el-button>
        <a @click="resetFn()">重置</a>
      </div>
    </div>
    <div class="showbtnView">
      <div class="lineView"></div>
      <div class="btnView" @click="basicsInfoYN = !basicsInfoYN">
        <i :class="!basicsInfoYN ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
      </div>
    </div>
  </div>
</template>

<script>
import treeSelectDialog from '/@/components/TreeSelectDialog/TreeSelectDialog.vue';
import IuapTableDialog from '/@/components/IuapTableDialog';
export default {
  name: 'IuapSearch',
  components: { treeSelectDialog, IuapTableDialog },
  props: {
    fromData: {
      type: [Array, Object],
      default: () => [],
    },
  },
  data() {
    return {
      // max: 509,
      // min: 255,
      itemNumber: 3,
      MytreeData: this.fromData,
      basicsInfoYN: true,
    };
  },
  watch: {
    fromData(newVal, oldVal) {
      this.MytreeData = this.fromData;
    },
  },
  mounted() {},
  methods: {
    // 搜索方法
    searchFn() {
      this.$emit('searchFn', this.MytreeData);
    },
    resetFn() {
      console.log('重置');
      this.MytreeData.forEach((element) => {
        element.value = '';
        return element;
      });
      this.$emit('reset', this.MytreeData);
    },
  },
  computed: {
    MytreeDataFn: function () {
      if (this.basicsInfoYN) {
        return this.MytreeData.slice(0, this.itemNumber);
      } else {
        return this.MytreeData;
      }
      // return this.MytreeData
    },
    MytreeDatas() {
      let MytreeData = this.MytreeData;
      return MytreeData;
    },
  },
};
</script>

<style lang='scss' scoped>
.flex-r-c-c {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.flex-r-c-s {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}

.flex-r-s {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

.flex-r-c {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.flex-c {
  display: flex;
  flex-direction: column;
}

.iuapBodyView {
  @extend .flex-c;

  .IuapSearchView {
    width: 100%;
    // margin-bottom: 16px;
    padding: 12px 0 0 16px;
    padding-right: 20px;
    background-color: rgba(247, 249, 253, 1);
    @extend .flex-r-s;

    .faanView {
      width: 125px;
    }

    .formView {
      flex: 1;
      @extend .flex-r-c;
      // word-wrap: ;
      flex-wrap: wrap;

      .formItemView {
        .itemView {
          @extend .flex-r-c;
          margin-bottom: 8px;

          .el-range-separator {
            min-width: 20px;
          }

          span {
            word-wrap: break-word;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            color: #333;
            display: -webkit-box;
            flex: 0 0 110px;
            font-size: 13px;
            hyphens: auto;
            line-height: 14px;
            max-height: 28px;
            overflow: hidden;
            padding-left: 12px;
            padding-right: 8px;
            position: relative;
            text-align: right;
            width: 110px !important;
            cursor: pointer;
          }
        }
      }
    }

    .searchView {
      padding-left: 10px;
      width: 130px;
      @extend .flex-r-c;

      a {
        margin-left: 5px;
      }
    }
  }

  .showbtnView {
    width: calc(100%);
    height: 24px;
    @extend .flex-r-c-c;
    margin: 0px 24px 5 px 24px;
    position: relative;
    background: linear-gradient(to bottom, rgba(247, 249, 253, 1), #fff);

    .lineView {
      position: absolute;
      left: 0px;
      width: 100%;
      height: 1px;
      background-image: linear-gradient(90deg, #ffffff 0%, #d8d8d8 50%, #ffffff 100%);
      z-index: 0;
    }

    .btnView {
      z-index: 1;
      background: #fff;
      @extend .flex-r-c-c;
      width: 20px;
      height: 16px;
      border-radius: 5px;
      border: 1px solid #505766;
    }
  }
}
::v-deep {
  .el-select-dropdown__wrap.el-scrollbar__wrap {
    margin-bottom: 0 !important;
  }
}
</style>
